<template>
    <el-header class="header">
    <el-row class="el-row">
        <el-col :span="6">
            <img src="../assets/images/logo-topbar.gif" @click="goHome"/>
        </el-col>
        <el-col :span="10">
            <el-breadcrumb separator="|" class="breadcrumb">
                <el-breadcrumb-item :to="{name:'Cart'}" ><img src="../assets/images/cart.gif" /></el-breadcrumb-item>
                <el-breadcrumb-item to="/home" v-if="this.account.username!==''">Sign out</el-breadcrumb-item>
                <el-breadcrumb-item :to="{name:'Login'}" v-if="this.account.username ===''" style="color: red;">Sign in</el-breadcrumb-item>
                <el-breadcrumb-item :to="{name:'MyAccount'}" style="color: red;">My account</el-breadcrumb-item>
                <el-breadcrumb-item :to="{name:'Welcome'}" style="color: red;">?</el-breadcrumb-item>
            </el-breadcrumb>
        </el-col>
        <el-col :span="8">
                <div class="mt-4">
                    <div class="el-autocomplete">
                    <el-autocomplete
                        :fetch-suggestions="querySearch"
                        :trigger-on-focus="false"
                        clearable
                        class="inline-input w-50"
                        placeholder="请输入所查找的商品"
                        @select="handleSelect"
                    />
                </div>
                    <el-button @click="search">搜索</el-button>
                </div>
        </el-col>
    </el-row>
    <el-row>
        <el-col>
            <el-breadcrumb separator="|" class="categoryBar">
               <el-breadcrumb-item>Fish</el-breadcrumb-item>
                <el-breadcrumb-item>Dogs</el-breadcrumb-item>
                <el-breadcrumb-item>Reptiles</el-breadcrumb-item>
                <el-breadcrumb-item>Cats</el-breadcrumb-item>
                <el-breadcrumb-item>Birds</el-breadcrumb-item>
            </el-breadcrumb>
    </el-col>
    </el-row>
</el-header>
</template>

<script>
export default {
    name:   'Top',
    data() {
      return {
        account:{
            username: localStorage.getItem('token').username,
        },
      }
    },
    methods:{
        goHome(){
            console.log("111111")
            this.$router.push({name: 'Home'})
        },
        search(){
            console.log("search")
        }
    },
    created(){
        console.log(localStorage.getItem('token'))
    }
    
}
</script>

<style>
.header{
    height: 100px;
    color: #fff;
    background-color: #0c0821;
    bottom: 0;
    width: 100%;
    left: 0;
}
.breadcrumb{
    transform: translateY(120%);
    margin-left: 100px;
}

.categoryBar{
    margin-left: 600px;
}
.el-breadcrumb__inner a, .el-breadcrumb__inner.is-link{
    color: red;
}
</style>